<template>
  <van-nav-bar
      :title="title"
      left-arrow
      @click-left="onClickLeft"
  >
  </van-nav-bar>

  <div id="content">
    <router-view />
  </div>
  <van-tabbar route  @change="onChange">
    <van-tabbar-item to="/" icon="home-o" name="index">主页</van-tabbar-item>
    <van-tabbar-item to="/searchSign" icon="search" name="team">查询页</van-tabbar-item>
    <van-tabbar-item to="/userInfo" icon="friends-o" name="userInfo">个人</van-tabbar-item>
  </van-tabbar>

</template>

<script setup>
// <!-- vue3的语法糖 setup指定在script中定义变量会直接暴露给页面(不用写return)-->
import {showToast} from "vant";
import {useRouter} from "vue-router";
import {provide, ref} from "vue";
import routes from "../config/route";

const router = useRouter();
const title = ref('默认标题')
const onClickLeft = () => {
  router.back()
}
// 点击右边的搜索实现路由的跳转
router.beforeEach((to,from) =>{
    const toPath = to.path;
    const route =  routes.find((route) =>{
        return toPath == route.path;
    })
    title.value = route?.title ?? '默认标题';
})
</script>

<style scoped>
#content{
  padding-bottom: 50px;
}
</style>